<template>
  <div>
    <common-head father-name="商城管理" child-name="售后管理"/>
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="退款申请" name="first">
          <refund v-if="isFirst"/>
        </el-tab-pane>
        <el-tab-pane label="退货申请" name="second">
          <return-request v-if="isSecond"/>
        </el-tab-pane>
        <el-tab-pane label="换货申请" name="third">
          <exchange-request v-if="isThird"/>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
  import ReturnRequest from "./component/ReturnRequest";
  import Refund from "./component/Refund";
  import ExchangeRequest from "./component/ExchangeRequest";
  import commonHead from "../system/common/commonHead";

  export default {
    data() {
      return {
        activeName: 'first',
        isFirst: true,
        isSecond: false,
        isThird: false
      };
    },
    name: "AfterSaleService",
    components: {
      ReturnRequest,
      Refund,
      ExchangeRequest,
      commonHead
    },
    methods: {
      handleClick(tab) {
        if (tab.name === 'first') {
          this.isFirst = true;
          this.isSecond = false;
          this.isThird = false;
        } else if (tab.name === 'second') {
          this.isFirst = false;
          this.isSecond = true;
          this.isThird = false;
        } else if (tab.name === 'third') {
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = true;
        }
      }
    }
  }
</script>

<style scoped>

</style>
